<template>
	<div class="page-content">
		<div class="flex">
			<div class="zt-right-close cursor flex-left" @click="closeDialog">
				<img src="@/assets/images/right.png" c style="height: 30px;widows: 30px;">
				<div style="color: #2CA6E0;margin-left: 5px; font-size: 16px;">返回</div>
			</div>
			<div class="zt-rihgt-title">
				{{ name }}
			</div>
		</div>
		<div class="form">
			<el-form ref="form" :model="form" label-width="80px">

				<el-row :span="24">
					<el-form-item label="行业名称">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-col :span="12">
						<el-form-item label="登录明名">
							<el-input v-model="form.loginName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="登录密码">
							<el-input v-model="form.password"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="服务日期">
							<el-date-picker v-model="form.time" type="daterange" range-separator="-"
								start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="域名orIP">
							<el-input v-model="form.ip"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="行业邮箱">
							<el-input v-model="form.e_mail"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item label="选择电台">
					<el-input clearable v-for="item, index in ids" v-model="ids[index]" :key="index"
						style="width: 170px;margin-right: 30px;" @change="inputChange"></el-input>
					<el-button type="add" round style="width: 170px;" @click="addDevice">+</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div class="page-content-bottom">
			<el-button type="primary" round @click="save">确定</el-button>
		</div>
	</div>
</template>
<script>
export default {
	name: 'GuildPage',
	props: {
		title: {
			type: String
		},
		// 电台列表
		deviceList: {
			type: Array,
			default: () => []
		}
	},
	watch: {
		deviceList(list) {
			const newList = JSON.stringify(list);
			const vlist = JSON.stringify(this.ids);
			if (newList != vlist) {
				this.ids = JSON.parse(newList)
			}
		}
	},
	created() {
		const newList = JSON.stringify(this.deviceList);
		this.ids = JSON.parse(newList);
	},
	data() {
		return {
			name: '行业服务编辑',
			open: false,
			form: {},
			ids: []
		}
	},
	methods: {
		// 电台变化事件
		inputChange() {
			this.$emit('change', this.ids.filter(item=>item))
		},
		// 添加电台
		addDevice() {
			this.ids.push(null)
		},
		// 保存
		save() {
			const form = {
				ids: this.ids.filter(item=>item),
				...this.form
			}
			console.log("保存数据：",form)
			this.$message.warning("此功能暂未开放！请关注后续更新");
		},
		closeDialog() {//关闭回调
			this.$emit("closeDialog", false);
		},
	}
}
</script>

<style scoped>
.page-content {
	width: 100%;
	height: calc(100vh - 110px);
	padding-left: 20px;
	padding-right: 20px;
	position: relative;
	box-sizing: border-box;
}

.flex {
	display: flex;
	height: 60px;
	line-height: 60px;
	width: calc(100% + 20px);
	background: linear-gradient(138deg, #313B53 0%, #272F43 100%);
	border-radius: 6px 0px 0px 0px;
}

.flex-left {
	margin-right: auto;
}

.zt-right-close {
	display: flex;
	height: 60px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.zt-rihgt-title {
	font-family: Microsoft YaHei, Microsoft YaHei;
	font-weight: 700;
	font-size: 18px;
	color: #9A9DAA;
	text-align: right;
	font-style: normal;
	text-transform: none;
	margin-right: 20px;
}

.el-button--add {
	background-color: #46E5CB;
	color: #036EB7;
	border-color: #46E5CB;
}
.form{
	padding: 20px;
}

/deep/.el-input__inner,
/deep/.el-range-input {
	background-color: #313B53;
	border-radius: 20px;
	width: 100%;

	font-family: Microsoft YaHei, Microsoft YaHei;
	font-weight: 400;
	font-size: 18px;
	color: #EDEDED;
	font-style: normal;
	text-transform: none;
}

/deep/.el-range-separator {
	color: #fff;
}
.page-content-bottom{
	text-align: right;
	position: absolute;
	bottom: 40px;
	width: calc(100% - 40px);
	box-sizing: border-box;
}
</style>